<template>
  <div ref="chartView" class="chart-view"></div>
</template>

<script setup>
import {ref,onMounted,watch} from "vue"
import * as echarts from 'echarts';
const props = defineProps({
  title:{
      type:String,
      default:''
  },
  list:{ 
      type:Array,
      default:[]
  },
  min:{
      type:Number,
      default:0
  },
   max:{
      type:Number,
      default:200
  }, 
  splitNumber:{
      type:Number,
      default:5
  },
  xList:{
      type:Array,
      default:[]
  },
  type:{
      type:Number,
      default:1
  }
})
const chartView = ref(null)
watch(()=>props.list,(n,o)=>{
  setChartView()
})
watch(()=>props.xList,(n,o)=>{
  setChartView()
})
onMounted(() => {
  setChartView()
})
const setChartView = ()=>{
  let chartDom = chartView.value;
  let myChart = echarts.init(chartDom);
  let option = {
      title: {
          text: props.title,
          left: 'left',
          textStyle:{
              fontSize:15
          }
      },
      tooltip: {
          trigger: 'axis'
      },
      grid: {
          left: '0',
          right: '2%',
          bottom:'0',
          top:'5%',
          containLabel: true
      },
      toolbox: {
          feature: {}
      },
      xAxis: {
          type: 'category',
          boundaryGap: false,
          data: props.list.map((min)=>min.operationTimeStr||'-')
      },
      yAxis: {
          type: 'value'
      },
      series: [
    {
      data:props.list.map((item)=>Number(item.sumFeiliaoNum||0)||Number(item.sumYaowuNum||0)),
      type: 'line',
      smooth: true
    } 
  ]
  };

  option && myChart.setOption(option);
  window.addEventListener('resize',()=> {
        myChart.resize(); 
  });
}
</script>

<style lang="scss" scoped>
.chart-view{
  height: 100%;
  width:100%;
  position: absolute;
}
</style>